<template>
  <div>
    <el-dialog title="菜单" :visible.sync="showDialog" @close="btnclose">
      <!-- 表单 -->
      <el-form
        ref="perForm"
        :model="formData"
        :rules="rules"
        label-width="80px"
        size="medium"
      >
        <el-form-item
          v-show="
            type === 'edit' || (type !== 'create' && formData.parent_id !== 0)
          "
          label="菜单类型"
          label-width="80px"
        >
          <el-button :type="btntype === 1 ? 'primary' : ''" @click="btntype = 1"
            >菜单</el-button
          >
          <el-button :type="btntype === 2 ? 'primary' : ''" @click="btntype = 2"
            >按钮</el-button
          >
        </el-form-item>
        <el-row>
          <el-col :span="12"
            ><el-form-item
              :label="btntype === 1 ? '菜单名称' : '按钮名称'"
              prop="permission_name"
              label-width="80px"
            >
              <el-input
                style="width: 100%"
                :placeholder="
                  btntype === 1 ? '请输入菜单名称' : '请输入按钮名称'
                "
                v-model="formData.permission_name"
              /> </el-form-item
          ></el-col>
          <el-col :span="12" v-show="btntype === 1"
            ><el-form-item label="菜单地址" prop="route" label-width="80px">
              <el-input
                style="width: 100%"
                placeholder="请输入路由地址，以/开头"
                v-model="formData.route"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-show="btntype === 1"
            ><el-form-item label="组件地址" prop="component" label-width="80px">
              <el-input
                style="width: 100%"
                placeholder="请输入组件路径地址，不以/开头"
                v-model="formData.component"
              /> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item
              label="权限标识"
              prop="permission_mark"
              label-width="80px"
            >
              <el-input
                style="width: 100%"
                placeholder="格式：controller@action"
                v-model="formData.permission_mark"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row v-show="btntype === 1">
          <el-col :span="12"
            ><el-form-item label="菜单图标" prop="icon" label-width="80px">
              <el-input
                style="width: 100%"
                :prefix-icon="formData.icon ? '' : 'el-icon-search'"
                placeholder="点击选择图标"
                v-model="formData.icon"
                @focus="iconIpt"
              >
                <svgIcon
                  v-show="formData.icon"
                  slot="prefix"
                  :iconClass="formData.icon"
                />
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="Redirect" prop="redirect" label-width="80px">
              <el-input
                style="width: 100%"
                placeholder="请输入Redirect"
                v-model="formData.redirect"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-show="btntype === 1">
            <el-form-item label="是否外链" prop="islink">
              <el-radio-group v-model="formData.islink">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="排序" prop="sort" label-width="80px">
              <el-input-number v-model="formData.sort" :min="1" size="small"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-show="btntype === 1">
          <el-col :span="12"
            ><el-form-item label="Hidden" prop="hidden">
              <el-radio-group v-model="formData.hidden">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="KeepAlive" prop="keepalive">
              <el-radio-group v-model="formData.keepalive">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="btnOK">确定</el-button>
      </span>
    </el-dialog>
    <!-- 图标弹框 -->
    <iconDialog ref="iconDialog" @changeIcon="changeIcon" />
  </div>
</template>

<script>
import iconDialog from "./iconDialog.vue";
import svgIcon from "@/components/SvgIcon";
import { createMenu, changeMenu } from "@/api/permission";
export default {
  name: "menuDialog",
  components: {
    svgIcon,
    iconDialog,
  },
  data() {
    return {
      showDialog: false,
      btntype: 1,
      formData: {
        component: "",
        hidden: "",
        icon: "",
        islink: "",
        keepalive: "",
        parent_id: 0,
        permission_mark: "",
        permission_name: "",
        redirect: "",
        route: "",
        sort: 10,
        type: 1,
      },
      type: "",
      rules: {
        permission_name: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" },
        ],
        route: [
          { required: true, message: "菜单地址不能为空", trigger: "blur" },
        ],
        permission_mark: [
          { required: true, message: "权限标识不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async btnOK() {
      try {
        // 表单校验
        await this.$refs.perForm.validate();
        // 处理数据
        this.formData.hidden = this.formData.hidden === "是" ? 2 : 1;
        this.formData.keepalive = this.formData.keepalive === "是" ? 1 : 2;
        this.formData.islink = this.formData.islink === "是" ? 1 : 2;
        //   创建
        if (this.type === "create") {
          await createMenu({ ...this.formData, parent_id: 0 });
          this.$message.success("创建成功！");
          this.showDialog = false;
          this.$emit("initData");
          this.type = "";
        } else if (this.type === "change") {
          // 编辑
          await changeMenu(this.formData.id, this.formData);
          this.$message.success("修改成功");
          this.showDialog = false;
          this.$emit("initData");
        } else {
          // console.log(this.formData.parent_id);
          await createMenu(this.formData);
          this.$message.success("添加成功");
          this.$emit("initData");
          this.showDialog = false;
        }
      } catch (error) {
        console.log(error);
      }
    },
    btnclose() {
      this.$refs.perForm.resetFields();
      this.btntype = this.btntype === 2 ? 1 : 1;
    },
    iconIpt() {
      this.$refs.iconDialog.showDialog = true;
    },
    changeIcon() {
      this.formData.icon = this.$refs.iconDialog.item;
    },
  },
};
</script>

<style scoped>
.el-input-group__prepend {
  padding: 0 13px !important;
}
.grid-content {
  border: 1px solid #000;
}
</style>
